<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Loading - a11y</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <link href="../../../../../css/core.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <script type="module">
      import { loadingController } from '../../../../../dist/ionic/index.esm.js';
      window.loadingController = loadingController;
    </script>
  </head>

  <body>
    <main>
      <h1>Loading - a11y</h1>
      <button
        id="open-message-loading"
        onclick="openLoading({
        message: 'Loading'
      })"
      >
        Present Loading with Message
      </button>

      <button
        id="open-label-loading"
        onclick="openLoading({
        spinner: 'bubbles',
        htmlAttributes: {
          'aria-label': 'Loading'
        }
      })"
      >
        Present Loading with Label
      </button>

      <script>
        async function openLoading(opts) {
          const loading = await loadingController.create(opts);
          await loading.present();
        }
      </script>
    </main>
  </body>
</html>
